<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:jsf="http://xmlns.jcp.org/jsf"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui">

    <style>
        .old {
            background-color:#4BB2C5 !important; //green
            background-image:none !important;
            color:#000000 !important;
        }
        .noAsis {
            background-color:#EAA228 !important; //green
            background-image:none !important;
            color:#000000 !important;
        }
    </style>
    <div>
        <p:panel header="ASISTENCIA DE EVENTO" style="border:none;">
            <!-- contenido WEB -->
            <div align="center" id="titleSoft">
                ASISTENCIA AL CURSO #{meetingBean.meeting.name}
            </div>
            <p:separator />
            <div align="center">
                Descripción: #{meetingBean.meeting.description}
            </div>
            <p:separator />
            <h:form id="formTableMetTo">
                <p:dataTable value="#{meetingBean.listMeetingBusinessAssociate}"
                             var="metNo" id="availableAssistance" scrollRows="20" 
                             scrollable="true" liveScroll="true" scrollHeight="150"
                             rowStyleClass="#{metNo.assistan eq true ? 'old' : 'noAsis'}">
                    <p:column  rendered="#{!metNo.assistan}" style="width:10px">   
                        <p:commandLink styleClass="ui-icon ui-icon-close" 
                                       update="availableAssistance,:chartReportAss"
                                       action="#{meetingBean.changeStateAssistance(metNo)}"/> 
                    </p:column> 
                    <p:column style="width:10px" rendered="#{metNo.assistan}">   
                        <p:commandLink styleClass="ui-icon ui-icon-check" 
                                       update="availableAssistance,:chartReportAss"
                                       action="#{meetingBean.changeStateAssistance(metNo)}"/> 
                    </p:column> 
                    
                    <p:column headerText="Cod. Carnet" width="55" >
                        #{metNo.idBusinessAssociate.codeCard}
                    </p:column>
                    <p:column headerText="Dni" width="55">
                        #{metNo.idBusinessAssociate.idPerson.dni}
                    </p:column>
                    <p:column headerText="Nombre">
                        #{metNo.idBusinessAssociate.idPerson.completeName}
                    </p:column>
                    <p:column headerText="Email">
                        #{metNo.idBusinessAssociate.idPerson.email}
                    </p:column>
                    <p:column headerText="Celular" width="66">
                        #{metNo.idBusinessAssociate.idPerson.phone}
                    </p:column>
                    <p:column style="width:10px">
                        <p:commandLink styleClass="ui-icon ui-icon-trash" 
                                       oncomplete="deleteMeeAss.show();">
                            <f:setPropertyActionListener
                                target="#{meetingBean.meetingBusinessAssociateRemove}"
                                value="#{metNo}" />
                        </p:commandLink>
                    </p:column>
                    <f:facet name="footer">
                        <div align="left">
                            <p:commandButton value="Añadir socio al evento" 
                                             action="#{meetingBean.clearDialogData()}"
                                             style="color:blue;" oncomplete="addAsToMet.show();"
                                             update=":addAsToMetId"/>
                        </div>
                    </f:facet>
                </p:dataTable>

            </h:form><br/><br/>
            <div align="center">
                <p:outputPanel id="chartReportAss">
                    <p:pieChart value="#{meetingBean.pieModel}" 
                                legendPosition="e" fill="false" 
                                showDataLabels="true" seriesColors="4BB2C5,EAA228"
                                title="Resumen de asistencia" 
                                style="width:400px;height:300px" 
                                sliceMargin="5" diameter="150" />
                </p:outputPanel>
            </div>
        </p:panel>
    </div>

    <p:dialog modal="true" appendTo="@(body)" widgetVar="deleteMeeAss"
              header="Esta seguro de eliminar?" >
        <h:form>
            <p:commandButton action="#{meetingBean.deleteMeetingBusinessAssociate()}"
                             value="Eliminar" style="color:red;"  oncomplete="deleteMeeAss.hide();"
                             update=":formTableMetTo:availableAssistance,:chartReportAss"/>
            <p:commandButton value="Cancelar" style="color:blue;" onclick="deleteMeeAss.hide();"/>
        </h:form>
    </p:dialog>
    
    <p:dialog modal="true" appendTo="@(body)" widgetVar="addAsToMet"
              id="addAsToMetId" header="Añadir Socio al Evento" onShow="but.disable();">
        <h:form>
            <h:outputText value="Apellidos y Nombres: " /><br/>
            <p:autoComplete placeholder="Paterno Materno, Nombres" scrollHeight="250"
                            queryDelay="1000" cache="true" cacheTimeout="10000"
                            converter="entityConverter" converterMessage="Vuelva a intentarlo"
                            value="#{meetingBean.businessAssociate}" 
                            emptyMessage="No hay socio de este año con ese nombre" forceSelection="true"
                            minQueryLength="4" completeMethod="#{meetingBean.autocompleteSearch}"
                            size="50" required="true" requiredMessage="Intente nuevamente"
                            var="i" itemValue="#{i}" itemLabel="#{i.idPerson.completeName}">
                <p:column headerText="Documento">
                    #{i.idPerson.dni}
                </p:column>
                <p:column headerText="Ap. y nombres">
                    #{i.idPerson.completeName}
                </p:column> 
                <p:ajax event="itemSelect" oncomplete="but.enable();"
                        update="codeCardId emailId birthId"/>
            </p:autoComplete>
            <p:separator />
           <h:panelGrid columns="2">
            <h:outputText value="Código Carnet:" />
            <h:outputText id="codeCardId" value="#{meetingBean.businessAssociate.codeCard}" />
            <h:outputText value="Email: " />
            <h:outputText id="emailId" value="#{meetingBean.businessAssociate.idPerson.email}" />
            <h:outputText value="Fecha de Nac: " />
            <h:outputText id="birthId" value="#{meetingBean.businessAssociate.idPerson.birthday}" />
        </h:panelGrid>
            <br/>
            <p:commandButton value="Guardar" style="color:blue;" update=":formTableMetTo:availableAssistance,:chartReportAss"
                             widgetVar="but" action="#{meetingBean.addAssosiateToMeeting()}" onclick="addAsToMet.hide();"/>
            <p:commandButton value="Cancelar" style="color:red;margin-left:15px;"
                             process="@this" onclick="addAsToMet.hide();"/>
            <br/>
        </h:form>
        

    </p:dialog>
</ui:composition>

